<template>
	<div class="company-position">
		<!-- 职位详情 -->
		<div class="detail-nav font13 h99">
			<router-link to="/vip/c_policy_declaration">{{$t('common.newJob.enterpriseCenter')}}</router-link>
			<span>&gt;</span>
			<router-link to="/vip/c_recruit_position_detail">{{$t('common.detail.jobDetail')}}</router-link>
		</div>
		
		<div class="company-position-content">
			<div class="company-position-name">{{detail.positionName}}</div>
			<div class="company-resume-box">
				<div class="company-resume-box-item">
					<span class="info"><span class="h66">{{$t('common.detail.recruitmentType')}}：</span>{{detail.vacantTypeTxt}}</span>
					<span class="info"><span class="h66">{{$t('common.newJob.workType')}}</span>{{detail.workTypeTxt}}</span>
					<span class="info"><span class="h66">{{$t('common.newJob.peopleCount')}}</span>{{detail.recruitingNumbers}}人</span>
					<span class="info color"><span class="h66">{{$t('common.newJob.salary')}}</span>{{detail.salaryRangeTxt}}/月</span>
					<span class="info"><span class="h66">{{$t('common.company.dateIssue')}}:</span>{{detail.releaseTime}}</span>
					<span class="info"><span class="h66">{{$t('common.newJob.address')}}</span>{{detail.workplace}}</span>
				</div>
			</div>
			
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.newJob.requirements')}}</div>
				<div class="company-resume-box-item">
					<div class="company-resume-educa">
						<div class="company-resume-educa-head flexBetween">
							<div>
								<strong>{{$t('common.newJob.duty')}}</strong>
							</div>
						</div>
						<p>{{detail.positionStatement}}</p>
					</div>
					<div class="company-resume-educa">
						<div class="company-resume-educa-head flexBetween">
							<div>
								<strong>{{$t('common.newJob.require')}}</strong>
							</div>
						</div>
						<p>{{detail.jobRequirements}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {showToast,ajaxBackAdd} from '@/utils/js.js'
	import {jobDetail} from '@/services/api.js'
  export default{
    data(){
      return{
			id:'', 
			detail:{},
      }
    },
	methods:{
		content(){
			ajaxBackAdd(this,jobDetail,{id:this.id},res=>{
				console.log('111111111',res)
				this.detail = res.data
			},err=>{
				showToast(this,err.msg)
			})
		}
	},
	mounted() {
		this.id = this.$route.query.id
		console.log(this.id)
		this.content()
		
	},
	watch:{
		'$i18n.locale'(){
			this.content()
		},
	}
  }
</script>
<style lang="scss">
.company-position-content{
	background-color: #fff;
	padding: 40px 140px;
	.company-position-name{
		font-size: 24px;
		margin-bottom: 30px;
	}
	.company-resume-box{
		width: 100%;
		padding-bottom: 30px;
		border-bottom: 1px solid #D6D7DC;
		.company-resume-box-item{
			padding-left: 17px;
			.price{
				margin: 6px 0;
			}
			.info{
				display: inline-block;
				width: 30%;
				margin: 6px 0;
			}
			.color{
				color: #FF7452;
			}
			.company-resume-educa{
				margin-bottom: 24px;
				.company-resume-educa-head{
					margin-bottom: 12px;
					strong{
						margin-right: 70px;
					}
				}
				p{
					line-height: 22px;
					color: #666;
				}
			}
			.company-resume-educa:nth-last-of-type(1){
				margin-bottom: 0;
			}
		}
		.company-resume-honor{
			table{
				width: 100%;
				text-align: center;
				tr{
					border: 1px solid #EDEDED;
					td{
						padding: 15px 30px;
					}
				}
				tr:nth-of-type(1){
					height: 40px;
					background-color: #F2F6FE;
					td:nth-last-of-type(1){
						width: 230px;
					}
				}
				
				.company-resume-honor-img{
					width: 60px;
					height: 76px;
					background-color: #D1D1D1;
					margin: auto;
				}
			}
		}
		.company-resume-upload{
			background-color: #FAFAFA;
			padding: 20px 30px;
			.company-resume-upload-item{
				margin-bottom: 10px;
				span{
					margin: 0 48px 0 10px;
				}
			}
			.company-resume-upload-item:nth-last-of-type(1){
				margin-bottom: 0;
			}
		}
	}
	.company-resume-box:nth-last-of-type(1){
		border-bottom: 0;
	}
}
</style>
